<template>
	<view class="setting">
		<view class="header">
			<view class="cellWrap" hover-class="uni-list-cell-hover" @click="changeMobile" >
				<view class="cell" >
					<view class="icon">
						<i class='iconfont '>&#xe61f;</i>
					</view>
					
					<view class="right">
						<view>
							<text>登录账号</text>
						</view>
						<view class="link">
							<text>{{mobile}}</text>
							<uni-icon type="arrowright" size="16"></uni-icon>
						</view>				
					</view>
				</view>
			</view>
			
			<view class="cellWrap" hover-class="uni-list-cell-hover" @click="changePassword" >
				<view class="cell">
					<view class="icon">
						<i class='iconfont '>&#xe6a9;</i>
					</view>
					
					<view class="right">
						<view>
							<text>密码修改</text>
						</view>
						<view class="link">
							<uni-icon type="arrowright" size="16"></uni-icon>
						</view>				
					</view>
				</view>
			</view>
			<view class="cellWrap agreementWrap" hover-class="uni-list-cell-hover" @click="agreement" >
				<view class="cell">
					<view class="icon">
						<i class='iconfont '>&#xe6a4;</i>
					</view>
					
					<view class="right">
						<view>
							<text>用户协议</text>
						</view>
						<view class="link">
							<uni-icon type="arrowright" size="16"></uni-icon>
						</view>				
					</view>
				</view>
			</view>
			
			<view class="cellWrap" hover-class="uni-list-cell-hover" @click="comment" >
				<view class="cell">
					<view class="icon">
						<i class='iconfont '>&#xe650;</i>
					</view>
					
					<view class="right">
						<view>
							<text>赐予好评</text>
						</view>
						<view class="link">
							<uni-icon type="arrowright" size="16"></uni-icon>
						</view>				
					</view>
				</view>
			</view>
				
		</view>
			
		<view class="footer">
			<view class="quit_btn" @click="quit">退出登录</view>
		</view>
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
export default {
	data() {
		return {
			money: null,
			mobile: uni.getStorageSync('mobile')
		};
	},
	onLoad(options) {},
	methods: {
		changeMobile() {
			uni.navigateTo({
				url: './changeMobile'
			});
		},
		changePassword() {
			uni.navigateTo({
				url: './changePassword'
			});
		},
		agreement() {
			uni.navigateTo({
				url: './userAgreement'
			});
		},
		comment() {
			if (plus.os.name=="ios") {
				location.href = 'https://itunes.apple.com/cn/app/hello-mui/id907931805?l=en&mt=8';
			} else if (plus.os.name=="Android") {
				plus.runtime.openURL('market://details?id=com.nervenets.jcb', function(e) {
					alert('未找到应用商店程序，暂时无法评分，感谢支持');
				});
			}
		},
		quit(e) {
			uni.clearStorageSync();
			uni.reLaunch({
				url: '../../login/index'
			});
		}
	},
	components: {
		uniIcon
	}
};
</script>

<style lang="less">
@import '../../../common/icon.css';
@import '../../../common/uni.css';
.setting {
	flex: 1;
	flex-direction: column;
	width: 100%;
	height: auto;
	.header {
		flex-direction: column;

		.cellWrap {
			background: white;
			padding: 0 30upx;
			box-sizing: border-box;
			.cell {
				align-items: center;
				width: 100%;
				height: 100upx;
				border-bottom: 1px solid #eeeeee;
				.icon {
					width: 10%;
					color: #cccccc;
				}
				.right {
					width: 90%;
					justify-content: space-between;
					font-size: 30upx;
					color: #333333;
					align-items: center;
					.link {
						justify-content: center;
						align-items: center;
						color: #bbbbbb;
					}
				}
			}
		}
		.cellWrap:nth-child(2) {
			.cell {
				border: none;
			}
		}
		.cellWrap:last-child {
			.cell {
				border: none;
			}
		}
		.agreementWrap {
			margin-top: 30upx;
		}
	}
	.footer {
		padding: 0 30upx;
		box-sizing: border-box;
		flex-direction: column;
		width: 100%;
		.quit_btn {
			background: #ff1268;
			color: white;
			font-size: 34upx;
			width: 100%;
			height: 100upx;
			justify-content: center;
			align-items: center;
			border-radius: 5upx;
			margin: 100upx auto 0;
			background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
			background: -o-linear-gradient(to right, #ff48ac, #ff1268);
			background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
			background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
			background: linear-gradient(to right, #ff48ac, #ff1268);
			color: white;
		}
	}
}
</style>
